<script>
import { mapGetters } from 'vuex'
import AddOrEditRoleDialog from '@/views/settings/components/roleTable/components/addOrEditRoleDialog/addOrEditRoleDialog.vue'
import premDialog from '@/views/settings/components/roleTable/components/premDialog/premDialog.vue'

export default {
  name: 'roleTable',
  components: { AddOrEditRoleDialog, premDialog },
  data() {
    return {
      /* 获取角色列表的loading状态  */
      loading: false,
      /* 分页参数 */
      pageParams: {
        page: 1,
        pagesize: 10
      },
      /* 是否显示添加或编辑角色的对话框 */
      showRoleDialog: false,
      /* 是否显示分配权限的弹框 */
      showPerDialog: false
    }
  },
  methods: {
    /* 用于派发action发送请求获取角色列表的回调函数 */
    async fetchRoleList() {
      try {
        this.loading = true
        await this.$store.dispatch('settingsStore/fetchRoleList', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /* 分页器一页展示的数据条数发生变化的回调函数 */
    handleSizeChange(size) {
      this.pageParams.pagesize = size
      this.fetchRoleList()
    },
    /* 分页器当前页发生变化的回调函数 */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchRoleList()
    },
    /* 点击编辑角色按钮的回调函数 */
    async handleEditRole(role) {
      // 使用refs获取子组件的实例调用子组件方法派发action发送请求获取角色详情
      await this.$refs.roleDialog.findRole(role.id)
      // 打开对话框
      this.showRoleDialog = true
    },
    /* 点击删除角色按钮的回调函数 */
    async handleDeleteRole(role) {
      const confirm = await this.$confirm(`删除${role.name}角色, 是否继续?`, '提示', { type: 'warning' }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const message = await this.$store.dispatch('settingsStore/deleteRole', role.id)
        this.$message.success(message)
        if (this.roleList.length <= 1) this.pageParams.page--
        this.fetchRoleList()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击添加角色按钮的回调函数 */
    handleAddRole() {
      this.showRoleDialog = true
    },
    /* 子组件添加角色或者编辑角色成功的自定义事件 */
    handleAddorEditRoleSuccess() {
      this.showRoleDialog = false
      this.fetchRoleList()
    },
    /* 点击给角色分配权限按钮的回调函数  */
    async handleassignPrem(role) {
      /* 使用ref获取子组件实例调用子组件的fetchPermissionList()函数派发action获取所有权限点 */
      await this.$refs.premDialog.fetchPermissionList()
      /* 使用ref获取子组件实例调用子组件的findPermIds(角色ID)函数派发action获取当前角色所拥有的权限点 */
      await this.$refs.premDialog.findPermIds(role.id)
      this.showPerDialog = true
    }
  },
  computed: {
    ...mapGetters('settingsStore', ['total', 'roleList'])
  },
  mounted() {
    this.fetchRoleList()
  }

}
</script>

<template>
  <div class="roleTable">
    <el-button type="primary" icon="el-icon-plus" @click="handleAddRole">添加角色</el-button>
    <el-table border stripe :data="roleList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgb(255, 255, 255">
      <el-table-column type="index" label="序号" align="center" width="150"></el-table-column>
      <el-table-column prop="id" label="角色ID" align="center"></el-table-column>
      <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
      <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button type="success" icon="el-icon-s-flag" @click="handleassignPrem(row)">分配权限</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="handleEditRole(row)">编辑角色</el-button>
          <el-button type="danger" icon="el-icon-delete-solid" @click="handleDeleteRole(row)">删除角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="total"
      background
    >
    </el-pagination>
    <add-or-edit-role-dialog :show-role-dialog.sync="showRoleDialog" @submit="handleAddorEditRoleSuccess" ref="roleDialog"></add-or-edit-role-dialog>
    <!--分配权限的弹框-->
    <prem-dialog :show-per-dialog.sync="showPerDialog" append-to-body ref="premDialog"></prem-dialog>
  </div>
</template>

<style scoped lang="scss">
.roleTable {
  .el-table {
    margin: 20px 0;
  }

  .el-pagination {
    text-align: center;
  }
}
</style>
